<!--
 * @Author: your name
 * @Date: 2023-03-22 11:30:24
 * @LastEditTime: 2023-03-28 15:31:44
 * @LastEditors: DESKTOP-4QFD9PO
 * @Description: In User Settings Edit
 * @FilePath: \ClothMes\src\views\DyeingFactory\CustomerComplaintRegister\components\CustomerComplaintRegisterDemo.vue
-->
<template>
    <pageTabelLayout>
        <template #pageHeader>
            <div class="search-form" v-if="headerShow" style="display:inline-block">
                <div>
                    <a-form size="small" :model="pageData" layout="inline" label-align="right"
                        :label-col-props="{ span: 8 }" :wrapper-col-props="{ span: 16 }">

                        <a-form-item label="客诉单号">
                            <a-input class="bacClass" v-model="pageData.customComplaintCode" @press-enter="huiche"
                                allow-clear style="width:200px" />
                        </a-form-item>

                        <a-form-item label="客户名称">
                            <a-input class="bacClass" v-model="pageData.customName" @press-enter="huiche" allow-clear
                                style="width:200px" />
                        </a-form-item>

                        <a-form-item label="业务员">
                            <a-input class="bacClass" v-model="pageData.salesman" @press-enter="huiche" allow-clear
                                style="width:200px" />
                        </a-form-item>
                        <a-form-item label="反馈日期">
                            <a-date-picker  popup-container="html"  class="bacClass" v-model="pageData.dateStart" />至<a-date-picker  popup-container="html"  class="bacClass"
                                v-model="pageData.dateEnd" />
                        </a-form-item>
                    </a-form>
                </div>
                <div class="my-tool-bar" style="float: right;">
                    <Toolbar :items="['查询', '新增', '删除', '打印', '导出']" @select="selectHandler" @export="exports"
                        @add="addHandler" @del="deleteHandler" @dyBoufei="dys">
                    </Toolbar>
                </div>
            </div>
            <div class="my-divisders" style="float: right;margin-top: -30px;">
                <a-divider orientation="center">
                    <icon-double-up v-if="headerShow" @click="headerShow = false" :strokeWidth="2" :size="18" />
                    <icon-double-down v-else @click="headerShow = true" :strokeWidth="2" :size="18" />
                </a-divider>
            </div>
        </template>
        <template #pageTabel>
            <a-space style="float:right;z-index:9999 ;">
            </a-space>

              <AgGridVuesCopys :rowHeight="33" :headerHeight="33" :suppressCopyRowsToClipboard="true" rowSelection="multiple" @grid-ready="gridReady" style="height:100%" :defaultColDef="defaultColDef"
                class='ag-theme-alpine' :rowData="table.dataList" :columnDefs="tc1" :localeText="localeText1">
            </AgGridVuesCopys>

        </template>
        <paginationCopys :total="total" show-total show-jumper show-page-size @change="PageSize" @page-size-change="change1"
            style="justify-content: center" :page-size="pagination.pageSize" :current="pagination.page"
            :page-size-options="pagingList1" />
        <!-- 主表抽屉 -->
        <a-drawer :drawer-style="{ 'zIndex': 9999 }" :mask-closable="false" height="80%" width="100%"
            :visible="pageData.showAdd" unmountOnClose @ok="sideOk" @cancel="pageData.showAdd = false" cancel-text='关闭'
            ok-text='保存' placement="bottom">
            <template #title>
                {{ pageData.sideTitle }}
            </template>
            <div style="min-width:70%;">
                <div style="width: 100%;">
                    <a-row :gutter="16">
                        <a-col :span="4">
                            <a-form-item label="客诉单号">
                                <a-input v-model="dataForm.customComplaintCode" disabled></a-input>
                            </a-form-item>
                        </a-col>
                        <a-col :span="4">
                            <a-form-item label="反馈日期">
                                <a-date-picker  popup-container="html"  class="bacClass" v-model="dataForm.customComplaintDate" />
                            </a-form-item>
                        </a-col>
                        <a-col :span="4">
                            <a-form-item label="客户名称">
                                <a-select popup-container="html"  class="bacClass" :loading="loading" :allowClear="true" @search="handleSearch"
                                    v-model="dataForm.customName" :filter-option="false" allow-search @focus="focusSel">
                                    <a-option v-for="item in pageData.nameList" :value="item['customName']">{{
                                        item['customName']
                                    }}</a-option>
                                </a-select>
                            </a-form-item>
                        </a-col>
                        <a-col :span="4">
                            <a-form-item label="业务员">
                                <a-select popup-container="html"  class="bacClass" :loading="loading" :allowClear="true" @search="handleSearch1"
                                    v-model="dataForm.salesman" :filter-option="false" allow-search @focus="focusSel1">
                                    <a-option v-for="item in pageData.nameList1" :value="item['name']">{{
                                        item['name']
                                    }}</a-option>
                                </a-select>
                            </a-form-item>
                        </a-col>
                        <a-col :span="4">
                            <a-form-item label="流转卡号">
                                <a-select popup-container="html"  class="bacClass" multiple :loading="loading" :allowClear="true"
                                    @search="handleSearch2" v-model="dataForm.circulatCard" :filter-option="false"
                                    allow-search @focus="focusSel2">
                                    <a-option v-for="item in pageData.nameList2" :value="item['customName']">{{
                                        item['customName']
                                    }}</a-option>
                                </a-select>
                            </a-form-item>
                        </a-col>
                        <a-col :span="4">
                            <a-form-item label="所属档口">
                                <a-input v-model="dataForm.stall" disabled></a-input>
                            </a-form-item>
                        </a-col>
                    </a-row>
                    <a-row :gutter="16">
                        <a-col :span="4">
                            <a-form-item label="布号">
                                <a-input v-model="dataForm.clothCode" disabled></a-input>
                            </a-form-item>
                        </a-col><a-col :span="4">
                            <a-form-item label="品名">
                                <a-input v-model="dataForm.brandName" disabled></a-input>
                            </a-form-item>
                        </a-col><a-col :span="4">
                            <a-form-item label="色号">
                                <a-input v-model="dataForm.colorCode" disabled></a-input>
                            </a-form-item>
                        </a-col><a-col :span="4">
                            <a-form-item label="色称">
                                <a-input v-model="dataForm.colorName" disabled></a-input>
                            </a-form-item>
                        </a-col>
                        <a-col :span="4">
                            <a-form-item label="匹数">
                                <a-input-number v-model="dataForm.horsesNum" disabled></a-input-number>
                            </a-form-item>
                        </a-col><a-col :span="4">
                            <a-form-item label="问题匹数">
                                <a-input-number class="bacClass" v-model="dataForm.questionHorsesNum"
                                    :min="0"></a-input-number>
                            </a-form-item>
                        </a-col>
                    </a-row>
                    <a-row :gutter="16">
                        <a-col :span="4">
                            <a-form-item label="客户问题描述">
                                <a-input class="bacClass" v-model="dataForm.customQuestionDescribe"></a-input>
                            </a-form-item>
                        </a-col>
                    </a-row>
                </div>
                <div style="width: 100%;">
                    <div>1.业务部出货前是否找仓库或染厂质保对色对过色?(颜色匹配问题填写)</div>
                    <div style="width: 100%;">
                        <div style="width: 100%;">
                            <div style="width: 45%; float: left;margin-left: 40px;">
                                <div>
                                    <el-checkbox v-model="dataForm.paramState1" :true-label="1"
                                        :false-label="0">业务部出货前是否找仓库</el-checkbox>
                                </div>
                                <div>
                                    <a-form-item>
                                        <a-input class="bacClass" v-model="dataForm.paramValue1"></a-input>
                                    </a-form-item>
                                </div>
                            </div>
                            <div style="width: 45%; float: left;margin-left: 40px;">
                                <div>
                                    <el-checkbox v-model="dataForm.paramState2" :true-label="1"
                                        :false-label="0">染厂质保对色组对过色</el-checkbox>
                                </div>
                                <div>
                                    <a-form-item>
                                        <a-input class="bacClass" v-model="dataForm.paramValue2"></a-input>
                                    </a-form-item>
                                </div>
                            </div>
                        </div>
                        <div style="width: 100%;">
                            <div style="width: 45%; float: left;margin-left: 40px;">
                                <div>
                                    <el-checkbox v-model="dataForm.paramState3" :true-label="1"
                                        :false-label="0">客户是否做过其他工艺处理</el-checkbox>
                                </div>
                                <div>
                                    <a-form-item>
                                        <a-input class="bacClass" v-model="dataForm.paramValue3"></a-input>
                                    </a-form-item>
                                </div>
                            </div>
                            <div style="width: 45%; float: left;margin-left: 40px;">
                                <div>
                                    <el-checkbox v-model="dataForm.paramState4" :true-label="1" :false-label="0">客户是否裁片?
                                        部分裁(裁了多少条) ? 全裁? 问题比例多少?</el-checkbox>
                                </div>
                                <div>
                                    <a-form-item>
                                        <a-input class="bacClass" v-model="dataForm.paramValue4"></a-input>
                                    </a-form-item>
                                </div>
                            </div>
                        </div>
                        <div style="width: 100%;margin-left: 40px;">
                            <el-checkbox style="width: 10%;" v-model="dataForm.clothCoverQuestion" :true-label="1"
                                :false-label="0">布面问题</el-checkbox>
                            <el-checkbox style="width: 10%;" v-model="dataForm.physicTarget" :true-label="1"
                                :false-label="0">物理指标</el-checkbox>
                            <el-checkbox style="width: 10%;" v-model="dataForm.colorQuestion" :true-label="1"
                                :false-label="0">颜色问题</el-checkbox>
                            <el-checkbox style="width: 10%;" v-model="dataForm.feelQuestion" :true-label="1"
                                :false-label="0">手感问题</el-checkbox>
                            <el-checkbox style="width: 10%;" v-model="dataForm.clothWrong" :true-label="1"
                                :false-label="0">错布</el-checkbox>
                        </div>
                    </div>
                    <div>2.问题图片(上传)</div>
                    <div style="margin-left: 40px;">
                        <el-upload action="#" list-type="picture-card" :auto-upload="false" :limit="8">
                            <el-icon>
                                <Plus />
                            </el-icon></el-upload>
                    </div>
                    <div>3.QC回复结果</div>
                    <div><a-form-item>
                            <a-textarea class="bacClass" v-model="dataForm.qcReplyResult" :max-length="400" allow-clear
                                show-word-limit />
                        </a-form-item></div>

                </div>
            </div>
        </a-drawer>
        <a-modal v-model:visible="visiblecg" ok-text="打印" @ok="print" :width="800" :model="objectOnly">
            <template #title> 打印单 </template>
            <div id="dyy1">
                <h1 style="text-align: center; font-size: 30px"><b>客户投诉登记列表</b></h1>
                <!-- <div v-for="(item, key, index) in objectOnly" :key="key"> -->
                <!-- <template :modal="objectOnly"> -->
                <div>
                    <div class="dyss">
                        <div style="width: 300px;"><b>客诉单号</b>: {{ objectOnly.customComplaintCode }}</div>
                        <div><b>反馈日期</b>: {{ objectOnly.customComplaintDate }}</div>

                    </div>
                    <div class="dyss">
                        <div><b>客户名称</b>: {{ objectOnly.customName }}</div>
                        <div><b>业务员</b>: {{ objectOnly.salesman }}</div>
                    </div>
                    <div class="dyss">
                        <div><b>流转卡号</b>: {{ objectOnly.circulatCard }}</div>
                        <div><b>所属档口</b>: {{ objectOnly.stall }}</div>
                    </div>
                    <div class="dyss">
                        <div><b>布号</b>: {{ objectOnly.clothCode }}</div>
                        <div><b>品名</b>: {{ objectOnly.brandName }}</div>
                    </div>
                    <div class="dyss">
                        <div><b>色号</b>: {{ objectOnly.colorCode }}</div>
                        <div><b>色称</b>: {{ objectOnly.colorName }}</div>
                    </div>
                    <div class="dyss">
                        <div><b>匹数</b>: {{ objectOnly.horsesNum }}</div>
                        <div><b>问题匹数</b>: {{ objectOnly.questionHorsesNum }}</div>
                    </div>
                    <div class="dyss">
                        <div><b>客户问题描述</b>: {{ objectOnly.customQuestionDescribe }}</div>
                </div>
                <div style="width: 100%;margin-top: 20px;">
                        <div><b>1.业务部出货前是否找仓库或染厂质保对色对过色?(颜色匹配问题填写)</b></div>
                        <div style="width: 100%;">
                            <div style="width: 100%;margin-top: 15px;">
                                <div style="width: 40%; float: left;margin-left: 40px;">
                                    <div>
                                        <!-- <el-checkbox disabled v-model="objectOnly.paramState1" :true-label="1"
                                                                                                                            :false-label="0"
                                                                                                                            :checked="objectOnly.paramState1 == '1' ? true : false">业务部出货前是否找仓库</el-checkbox> -->
                                        <input disabled type="checkbox" name="aa"
                                            :checked="objectOnly.paramState1 == '1' ? true : false"> 业务部出货前是否找仓库
                                    </div>
                                    <div>
                                    <span>
                                            {{ objectOnly.paramValue1 }}
                                        </span>
                                    </div>
                                </div>
                                <div style="width: 40%; float: left;margin-left: 40px;">
                                    <div>
                                        <!-- <el-checkbox disabled v-model="objectOnly.paramState2" :true-label="1"
                                                                                                            :false-label="0">染厂质保对色组对过色</el-checkbox> -->
                                        <input disabled type="checkbox" name="aa"
                                            :checked="objectOnly.paramState2 == '1' ? true : false"> 染厂质保对色组对过色
                                    </div>
                                    <div>
                                        <span>
                                            {{ objectOnly.paramValue2 }}
                                    </span>
                                    </div>
                                </div>
                            </div>
                            <div style="width: 100%;margin-top: 15px;">
                                <div style="width: 40%; float: left;margin-left: 40px;">
                                    <div>
                                        <!-- <el-checkbox disabled v-model="objectOnly.paramState3" :true-label="1"
                                                                                                            :false-label="0">客户是否做过其他工艺处理</el-checkbox> -->
                                        <input disabled type="checkbox" name="aa"
                                            :checked="objectOnly.paramState3 == '1' ? true : false"> 客户是否做过其他工艺处理
                                    </div>
                                    <div>
                                    <span>
                                        {{ objectOnly.paramValue3 }}
                                        </span>
                                    </div>
                                </div>
                                <div style="width: 40%; float: left;margin-left: 40px;">
                                    <div>
                                        <!-- <el-checkbox disabled v-model="objectOnly.paramState4" :true-label="1"
                                                                                                            :false-label="0">客户是否裁片?
                                                                                                            部分裁(裁了多少条) ? 全裁? 问题比例多少?</el-checkbox> -->
                                        <input disabled type="checkbox" name="aa"
                                            :checked="objectOnly.paramState4 == '1' ? true : false"> 客户是否裁片?
                                        部分裁(裁了多少条) ? 全裁? 问题比例多少?
                                    </div>
                                    <div>
                                    <span>
                                            {{ objectOnly.paramValue4 }}
                                        </span>
                                    </div>
                            </div>
                            </div>
                            <div style="width: 100%;margin-left: 5px;margin-top: 15px;">
                                <!-- <el-checkbox disabled style="width: 15%;" v-model="objectOnly.clothCoverQuestion"
                                    :true-label="1" :false-label="0">布面问题</el-checkbox> -->
                                <input style="width: 11%;" disabled type="checkbox" name="aa"
                                    :checked="objectOnly.clothCoverQuestion == '1' ? true : false">布面问题
                                <!-- <el-checkbox disabled style="width: 15%;" v-model="objectOnly.physicTarget" :true-label="1"
                                    :false-label="0">物理指标</el-checkbox> -->
                                <input style="width: 11%;" disabled type="checkbox" name="aa"
                                    :checked="objectOnly.physicTarget == '1' ? true : false">物理指标
                                <!-- <el-checkbox disabled style="width: 15%;" v-model="objectOnly.colorQuestion" :true-label="1"
                                    :false-label="0">颜色问题</el-checkbox> -->
                                <input style="width: 11%;" disabled type="checkbox" name="aa"
                                    :checked="objectOnly.colorQuestion == '1' ? true : false">颜色问题
                                <!-- <el-checkbox disabled style="width: 15%;" v-model="objectOnly.feelQuestion" :true-label="1"
                                                                                                    :false-label="0">手感问题</el-checkbox> -->
                                <input style="width: 11%;" disabled type="checkbox" name="aa"
                                    :checked="objectOnly.feelQuestion == '1' ? true : false">手感问题
                                <!-- <el-checkbox disabled style="width: 15%;" v-model="objectOnly.clothWrong" :true-label="1"
                                                                                                    :false-label="0">错布</el-checkbox> -->
                                <input style="width: 11%;" disabled type="checkbox" name="aa"
                                    :checked="objectOnly.clothWrong == '1' ? true : false">错布
                            </div>
                        </div>
                        <div style="margin-top: 15px;"><b>2.问题图片(上传)</b></div>
                        <div style="margin-left: 40px;">
                            <el-upload disabled action="#" list-type="picture-card" :auto-upload="false" :limit="8"
                                v-if="pageData.iconOpen">
                                <el-icon>
                                    <Plus />
                                </el-icon></el-upload>
                        </div>
                        <div style="margin-top: 15px;"><b>3.QC回复结果</b></div>
                        <div>
                            <span style="margin: 10px 0 0 20px;">{{ objectOnly.qcReplyResult }}</span>
                        </div>

                    </div>
                </div>
                <!-- </template> -->
            </div>
        </a-modal>
    </pageTabelLayout>
</template>

<script lang="ts">
import { post, get } from "@/api/http";
import {
    useTable,
    useRowKey,
    useTableColumn,
    usePagination,
    useRowSelection,
} from "@/hooks/table";
import printJS from 'print-js'
import QrcodeVue from 'qrcode.vue'
import ModalDialog from '@/components/ModalDialog.vue'
import { ref, reactive, onMounted, onActivated } from "vue";
import Toolbar from "@/components/Toolbar.vue";
import { Form, Message, Modal } from "@arco-design/web-vue";
import emitter from "@/hooks/useEventBus";

import PageTabelLayout from '@/components/pageTabelLayout.vue';
import WHService, { Warhouse, CompanyList, WhTypeField } from '@/service/wh'
import WHStore from '@/store/modules/wh'
import { localeText } from '@/api/aggridZw'
import { pagingList } from '@/api/paging'
import { FormInstance } from '@arco-design/web-vue/es/form'
interface ClothInfo {
    "id": any,
    customComplaintCode: any,
    customComplaintDate: any,
    customName: any,
    salesman: any,
    circulatCard: any,
    stall: any,
    clothCode: any,
    brandName: any,
    colorCode: any,
    colorName: any,
    horsesNum: any,
    questionHorsesNum: any,
    customQuestionDescribe: any,
    paramState1: number,
    paramValue1: any,
    paramState2: number,
    paramValue2: any,
    paramState3: number,
    paramValue3: any,
    paramState4: number,
    paramValue4: any,
    clothCoverQuestion: number,
    physicTarget: number,
    colorQuestion: number,
    feelQuestion: number,
    clothWrong: number,
    qcReplyResult: any,

}

export default {
    name: "CustomerComplaintRegisterDemo",
    setup() {
        const dataForm = reactive<ClothInfo>({
            "id": null,
            customComplaintCode: '',
            customComplaintDate: '',
            customName: '',
            salesman: '',
            circulatCard: '',
            stall: '',
            clothCode: '',
            brandName: '',
            colorCode: '',
            colorName: '',
            horsesNum: null,
            questionHorsesNum: null,
            customQuestionDescribe: '',
            paramState1: 0,
            paramValue1: '',
            paramState2: 0,
            paramValue2: '',
            paramState3: 0,
            paramValue3: '',
            paramState4: 0,
            paramValue4: '',
            clothCoverQuestion: 0,
            physicTarget: 0,
            colorQuestion: 0,
            feelQuestion: 0,
            clothWrong: 0,
            qcReplyResult: '',
        });
        const headerShow = ref<boolean>(true);
        const total = ref(10);
        const page = ref(1);
        const size = ref(10);
        function PageSize(val: any) {

            pagination.page = val
            doRefresh();

        }

        function change1(val: any) {

            pagination.pageSize = val
            doRefresh();

        }
        let id = ref(1);
        //查询 

        function doRefresh() {
            pageData.pageLoading = true;
            post({
                url: "/dwQms/CustomComplaint/getPage",
                data: {
                    page: pagination.page,
                    size: pagination.pageSize,
                    deleteState: 0,

                    customComplaintCode: pageData.customComplaintCode,
                    customName: pageData.customName,
                    salesman: pageData.salesman,
                    beginDate: pageData.dateStart,
                    endDate: pageData.dateEnd

                },
            })
                .then(({ data, code }: any) => {
                    if (code === 200) {
                        // data.list.filter(function(o:any){

                        // })
                        table.handleSuccess(data.list);
                        gridOption.value.setRowData(data.list);
                        total.value = data.total;

                    }
                })
                .catch(console.log).finally(() => {
                    pageData.pageLoading = false
                })
        }
        const huiche = () => {
            doRefresh();
        }
        const { selectedRowKeys, onSelectionChange } = useRowSelection();
        const selectedRowKeysChecked = useRowSelection();
        const pagination = usePagination(doRefresh);
        const table = useTable();
        const table1 = useTable();
        const rowKey = useRowKey("id");
        const tableColumns = useTableColumn([
            {
                title: "客诉单号",
                key: "customComplaintCode",
                dataIndex: "customComplaintCode",
                width: 150
            },
            {
                title: "反馈日期",
                key: "customComplaintDate",
                dataIndex: "customComplaintDate",
                width: 150
            },
            {
                title: "所属档口",
                key: "stall",
                dataIndex: "stall",
                width: 150
            },
            {
                title: "业务员",
                key: "salesman",
                dataIndex: "salesman",
                width: 150
            },
            {
                title: "流转卡号",
                key: "circulatCard",
                dataIndex: "circulatCard",
                width: 150
            },

            {
                title: "客户名称",
                key: "customName",
                dataIndex: "customName",
                width: 150
            },

            {
                title: "布号",
                key: "clothCode",
                dataIndex: "clothCode",
                width: 150
            },

            {
                title: "品名",
                key: "brandName",
                dataIndex: "brandName",
                width: 150
            },
            {
                title: "色号",
                key: "colorCode",
                dataIndex: "colorCode",
                width: 200
            },

            {
                title: "色称",
                key: "colorName",
                dataIndex: "colorName",
                width: 200
            }, {
                title: "匹数",
                key: "horsesNum",
                dataIndex: "horsesNum",
                width: 200
            }, {
                title: "问题匹数",
                key: "questionHorsesNum",
                dataIndex: "questionHorsesNum",
                width: 200
            },
            {
                title: "客户问题描述",
                key: "customQuestionDescribe",
                dataIndex: "customQuestionDescribe",
                width: 200
            },
            {
                title: "操作",
                key: "act",
                dataIndex: "act",
                fixed: 'right',
                slotName: 'act',
                width: 80
            }
        ]);

        //获取公司部门组列表
        const defaultColDef = {
            sortable: true,
            resizable: true,
            filter: true,
            // flex: 1
        }

        let tc1: any[] = tableColumns.map((o) => {

            let obj = {
                headerName: o.title,
                field: o.key,
                pinned: o['fixed']
            }

            if (o.slotName === 'act') {
                obj['resizable'] = false
                obj['filter'] = false
                obj['sortable'] = false
                obj['lockPosition'] = 'right'
                obj['width'] = 80
                obj['cellRenderer'] = {
                    template: `<el-button style="color:#165dff;" link @click="a">修改</el-button>`,
                    setup(props: any) {
                        const a = () => {
                            editHandler(props.params.data)
                        }
                        return {
                            a,
                        }
                    },
                }
            }

            return obj
        })
        let a1 = [{
            showRowGroup: 'hide_def',
            "headerName": "",
            "checkboxSelection": true,
            "headerCheckboxSelection": true,
            "pinned": "left",
            "width": 50,
            resizable: false,
            filter: false,
            sortable: false,
            minWidth: 50,
            maxWidth: 50,
            lockPosition: "left",
        }]
        tc1 = a1.concat(tc1)

        const pageData = reactive<{
            customComplaintCode: any,
            customName: any,
            salesman: any,
            dateStart: any,
            dateEnd: any,
            rHeight: number | undefined,
            showAdd: boolean,
            sideTitle: any,
            pageLoading: boolean,
            nameList: any[],
            nameList1: any[],
            nameList2: any[],
            iconOpen: boolean,

        }>({
            iconOpen: false,
            nameList: [],
            nameList1: [],
            nameList2: [],
            customComplaintCode: '',
            customName: '',
            salesman: '',
            dateStart: '',
            dateEnd: '',
            rHeight: 0,
            showAdd: false,
            sideTitle: '新增客户投诉登记',
            pageLoading: true,
        });

        onMounted(() => {
            doRefresh();
            emitter.on("CustomerComplaintRegisterDemo", () => {
                // selCxAll({});
                doRefresh();
            });
            pageData.rHeight = document.getElementsByClassName("main-section")[0]?.clientHeight
            //弹出层的高
            if (pageData.rHeight !== undefined) {
                pageData.rHeight = pageData.rHeight - 50;
            }
        });
        let isIDs: any = ref(1);

        // 查询按钮事件
        const selectHandler = () => {
            pagination.page = 1
            loadings.value = true
            doRefresh()
        };

        let loadings = ref(false)


        // 表格准备事件
        const gridOption = ref()
        const gridReady = (params: any) => {
            gridOption.value = params.api
        }
        const whList = ref<any[]>([])
        const whService = new WHService()
        const whTypeList = whService.whTypeList
        const whTypeFieldList = whService.whTypeFieldList
        const companyList: any = whService.companyList


        const editHandler = (record: any) => {
            for (var key in record) {
                dataForm[key] = record[key]
            }
            dataForm.circulatCard = dataForm.circulatCard.split(",")
            pageData.showAdd = true
            pageData.sideTitle = '修改客户投诉登记'
        };
        const addHandler = () => {
            for (var key in dataForm) {
                if (key === 'id') {
                    dataForm[key] = null
                } else {
                    dataForm[key] = ''
                }
            }
            // 客诉单号渲染事件
            post({
                url: "/dwQms/CustomComplaint/getCodeGenerate",
                data: {}
            }).then((res: any) => {
                if (res.code === 200) {
                    dataForm.customComplaintCode = res.data
                }
            })
            pageData.showAdd = true
            pageData.sideTitle = '新增客户投诉登记'
        }
        // 新增
        const formRef = ref<FormInstance>()
        const sideOk = () => {
            // console.log(dataForm.circulatCard, '兰亭临帖 行书如行云流水');
            if (dataForm.circulatCard != '') {
                dataForm.circulatCard = dataForm.circulatCard.join()
            } else {
                dataForm.circulatCard == ''
            }

            // console.log(dataForm.circulatCard, '夕阳余晖 如你的羞涩似醉');
            if (pageData.sideTitle === '新增客户投诉登记') {
                post({
                    url: '/dwQms/CustomComplaint/insert',
                    data: [dataForm],
                }).then((res: any) => {
                    if (res.code === 200) {
                        formRef.value?.resetFields()

                        pageData.showAdd = false

                        Message.success({
                            content: '新增成功',
                            duration: 5000,
                        })
                        doRefresh()
                    } else {
                        Message.error({
                            content: res.message,
                            duration: 5000,
                        })
                    }
                })
            } else {
                post({
                    url: '/dwQms/CustomComplaint/update',
                    data: [dataForm],
                }).then((res: any) => {
                    if (res.code === 200) {
                        formRef.value?.resetFields()
                        pageData.showAdd = false

                        Message.success({
                            content: '修改成功',
                            duration: 5000,
                        })
                        doRefresh()
                    } else {
                        Message.error({
                            content: res.message,
                            duration: 5000,
                        })
                    }
                })
            }

        }
        const deleteHandler = () => {
            console.log(gridOption.value.getSelectedRows(), '再给我看看你受伤的尾巴');

            if (gridOption.value.getSelectedRows().length === 0) {
                Message.error('请先勾选')
                return;
            }
            Modal.confirm({
                title: "系统提示",
                content: "确认删除选中的数据?",
                onOk() {
                    post({
                        url: "/dwQms/CustomComplaint/delete",
                        data: gridOption.value.getSelectedRows().map((o: any) => { return o.id })
                    }).then(({ code, data, message }: any) => {
                        if (code === 200) {
                            Message.success({
                                content: "删除成功",
                                duration: 5000,
                            });

                            pagination.page = 1
                            doRefresh();

                        } else {
                            Message.error({
                                content: '删除失败',
                                duration: 5000,
                            });
                        }

                    });
                },
            });
        };
        //导出
        const exports = () => {
            if (gridOption.value.getSelectedRows().length === 0) {
                Message.error('请先勾选');
                return
            } else {
                let idList: any = []
                gridOption.value.getSelectedRows().forEach(function (o: any) {
                    idList.push(o['id'])
                })
                //将表头拼接出来
                let head = "<th>客诉单号</th><th>反馈日期</th><th>所属档口</th><th>业务员</th><th>流转卡号</th><th>客户名称</th><th>布号</th><th>品名</th><th>色号</th><th>色称</th><th>匹数</th><th>问题匹数</th><th>客户问题描述</th>"
                //拿到当前表格数据与勾选的行做筛选

                let nowRow = table.dataList.filter(function (o) {
                    return (gridOption.value.getSelectedRows().map((o: any) => { return o.id })).indexOf(o["id"]) !== -1;
                })
                let body = "";
                nowRow.forEach(function (o) {
                    body += "<tr><td>" + o["customComplaintCode"] + "</td>";
                    body += "<td>" + (o["customComplaintDate"] == undefined ? "" : o["customComplaintDate"]) + "</td>";
                    body += "<td>" + (o["stall"] == undefined ? "" : o["stall"]) + "</td>";
                    body += "<td>" + (o["salesman"] == undefined ? "" : o["salesman"]) + "</td>";

                    body += "<td>" + (o["circulatCard"] == undefined ? "" : o["circulatCard"]) + "</td>";
                    body += "<td>" + (o["customName"] == undefined ? "" : o["customName"]) + "</td>";
                    body += "<td>" + (o["clothCode"] == undefined ? "" : o["clothCode"]) + "</td>";
                    body += "<td>" + (o["brandName"] == undefined ? "" : o["brandName"]) + "</td>";

                    body += "<td>" + (o["colorCode"] == undefined ? "" : o["colorCode"]) + "</td>";
                    body += "<td>" + (o["colorName"] == undefined ? "" : o["colorName"]) + "</td>";
                    body += "<td>" + (o["horsesNum"] == undefined ? "" : o["horsesNum"]) + "</td>";
                    body += "<td>" + (o["questionHorsesNum"] == undefined ? "" : o["questionHorsesNum"]) + "</td>";

                    body += "<td>" + (o["customQuestionDescribe"] == undefined ? "" : o["customQuestionDescribe"]) + "</td>";
                    body += "</tr>";
                })
                tableToXlsx(head, '客户投诉登记列表', body)
                console.log(table)
            }
        }

        function tableToXlsx(head: any, filename: any, body: any) {
            const uri = 'data:application/vnd.ms-excel;base64,',
                template = `<html>
            <head><meta charset="UTF-8"></head>
            <body><table border="1"><tr>${head}</tr>${body}</table></body>
        </html>`;

            const a = document.createElement('a');
            a.href = uri + window.btoa(unescape(encodeURIComponent(template)));
            a.download = filename;
            a.click();
            document.removeChild(a);
        }
        const pagingList1: any = ref(pagingList)
        const localeText1: any = ref(localeText)


        //客户名称下拉框得到焦点
        const focusSel = () => {
            selCxAll({ customName: '' })
        }
        const options = ref<any>(pageData.nameList)
        const loading = ref(false)
        const handleSearch = (value: any) => {
            if (value) {
                const ob = { customName: value }
                loading.value = true
                selCxAll(ob)
                options.value = pageData.nameList
                loading.value = false
            } else {
                options.value = []
            }
        }
        function selCxAll(val: any) {
            post({
                url: '/aps/custom/getDropValue',
                data: val,
            }).then(({ data, code }: any) => {
                if (code === 200) {
                    pageData.nameList = data
                } else {
                    Message.error({
                        content: '查询失败！',
                        duration: 5000,
                    })
                }
            })
        }
        //业务员下拉框得到焦点
        const focusSel1 = () => {
            selCxAll1({ name: '' })
        }
        const options1 = ref<any>(pageData.nameList1)
        const loading1 = ref(false)
        const handleSearch1 = (value: any) => {
            if (value) {
                const ob = { name: value }
                loading1.value = true
                selCxAll1(ob)
                options1.value = pageData.nameList1
                loading1.value = false
            } else {
                options1.value = []
            }
        }
        function selCxAll1(val: any) {
            post({
                url: '/org/hrEmployee/getFieldValue',
                data: val,
            }).then(({ data, code }: any) => {
                if (code === 200) {
                    pageData.nameList1 = data
                } else {
                    Message.error({
                        content: '查询失败！',
                        duration: 5000,
                    })
                }
            })
        }
        //流转卡号下拉框得到焦点
        const focusSel2 = () => {
            selCxAll2({ customName: '' })
        }
        const options2 = ref<any>(pageData.nameList2)
        const loading2 = ref(false)
        const handleSearch2 = (value: any) => {
            if (value) {
                const ob = { customName: value }
                loading2.value = true
                selCxAll2(ob)
                options2.value = pageData.nameList2
                loading2.value = false
            } else {
                options2.value = []
            }
        }
        function selCxAll2(val: any) {
            post({
                url: '/aps/custom/getDropValue',
                data: val,
            }).then(({ data, code }: any) => {
                if (code === 200) {
                    pageData.nameList2 = data
                } else {
                    Message.error({
                        content: '查询失败！',
                        duration: 5000,
                    })
                }
            })
        }

        let visiblecg = ref(false)
        let objectOnly: any = ref([])
        const dys = (val: any) => {
            if (gridOption.value.getSelectedRows().length == 0) {
                Message.error('请先勾选')
                return
            } else {

                let ids = gridOption.value.getSelectedRows().map((o: any) => {
                    return o.id
                })
                objectOnly.value = []
                post({
                    url: '/dwQms/CustomComplaint/getList',
                    data: { id: ids[0] },
                }).then((res: any) => {
                    if (res.code === 200) {
                        // res.data.filter((o: any) => {
                        //     if (ids[0] == o.id) {
                        //         objectOnly.value = o
                        //     }
                        // })
                        objectOnly.value = res.data[0]
                        // console.log(res.data, objectOnly, ids, '爱意随风起');
                        console.log(objectOnly.value)
                        visiblecg.value = true

                    } else {
                        Message.error({
                            content: res.message,
                            duration: 5000,
                        })
                    }
                })
                // objectOnly.value = []
                // objectOnly = gridOption.value.getSelectedRows()
                // visiblecg.value = true
                // console.log(objectOnly, '斑马斑马你来自南方的红色啊');
                // console.log(objectOnly.customComplaintCode, '你转身一走苏州里的不是我');



            }
        }
        const print = (record: any) => {
            // for (var key in record) {
            //     dataForm[key] = record[key]
            // }
            pageData.iconOpen = false
            printJS({
                printable: 'dyy1',
                type: 'html',
                targetStyles: ['*'],
            })
            console.log(objectOnly, '不能给我的请完整给他');

        }
        return {
            visiblecg,
            dys,
            handleSearch1,
            focusSel1,
            handleSearch2,
            focusSel2,
            handleSearch,
            focusSel,
            pagingList1,
            localeText1,
            huiche,
            editHandler,
            print,
            whTypeList,
            isIDs,
            companyList,
            table1,
            whList,
            addHandler,
            id,
            exports,
            tc1,
            gridOption,
            deleteHandler,
            gridReady,
            loading,
            total,
            dataForm,
            selectedRowKeys,
            s: selectedRowKeysChecked.selectedRowKeys,
            pagination,
            tableColumns,
            table,
            rowKey,
            pageData,
            selectHandler,
            defaultColDef,
            sideOk,
            headerShow,
            change1,
            PageSize,
            objectOnly,
        }
    },
    components: { Toolbar, PageTabelLayout, ModalDialog, QrcodeVue }
}
</script>
<style scoped lang="less">
:deep(.ag-cell) {
    border-right: 1px solid #dde2eb;
}

:deep(.ag-header-cell) {
    border-right: 1px solid #dde2eb;
}

:deep(.ag-cell-value) {
    user-select: initial;
    -moz-user-select: text;
    -ms-user-select: text;
    -webkit-user-select: text;
}

:deep(.body) {
    margin: 0px;
}

.dyss {
    margin-bottom: 100px;
    display: flex;
    width: 90%;
    margin: 0 auto;
    justify-content: space-between;
    font-weight: 1000;

    div {
        width: 200px;
    }
}
</style>
